<template>
  <el-col :span="20" class="bg-purple searchBox">
    <el-row type="flex" justify="justify">
      <div class="cityBox">地区关键字:</div>
      <input placeholder="请输入地区关键字" id="searchMap" />
    </el-row>
    <!-- v-model="search" -->
    <div class="mapBox">
      <div id="container"></div>
    </div>
  </el-col>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default{
  data(){
   return{
    map:''
   }
  },
  mounted(){
  //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods:{
    initMap(){
      AMapLoader.load({
        key:"84f991e1187e1b59fc5aa0bc40672d38",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:[
          'AMap',
          'AMap.AutoComplete',
          'AMap.PlaceSearch',
        ],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        const map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"2D",    //是否为3D地图模式
          zoom:5,           //初始化地图级别
          features: ['bg', 'road', 'building', 'point'],
          center:[116.3975, 39.908], //初始化地图中心点位置
          zoom: 11,  // number取值最好在 3-18 (值越小地图范围越大)
          resizeEnable: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{

          const placeSearch = new AMap.PlaceSearch({
            map: map,
            autoFitView: true,
          })  //构造地点查询类
          const autoOptions = {
            input: "searchMap"
          }

          const auto = new AMap.AutoComplete({
            input: 'searchMap'
          })
          console.log(placeSearch, 999)
          console.log(auto, 9922)
          auto.on('select', e => {
            console.log(e, select)
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
          });//注册监听，当选中某条记录时会触发
        })
         
      }).catch(e=>{
        console.log(e);
      })
    },
    //输入提示
    // selectMap() {
    // //   //输入提示
      
    // }
  }   
}
</script>

<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
</style>
<style >
.mapBox{
  margin-top: 20px;
  width: 100%;
  height: 690px;
  /* background-color: pink; */
}
.el-input__inner{
  width: 200px !important;
}
.searchBox {
    padding: 25px !important;
}
 .cityBox{
      width: 100px;
      text-align: center;
      margin: auto 0;
    }
</style>
